<template>
  <div class="bak">
    <div id="app">
      <vue-particles
          color="#dedede"
          :particleOpacity="0.7"
          :particlesNumber="100"
          shapeType="circle"
          :particleSize="4"
          linesColor="#dedede"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.3"
          :linesDistance="200"
          :moveSpeed="3"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          clickMode="push"
      >
      </vue-particles>
    </div>
    <el-card class="box-card" style="width: 600px;height:400px;margin: 0 auto;text-align: center;">
      <div><h1>Welcome</h1></div>

      <el-form v-model="user" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="acct" label-width="50px">
          <el-input prefix-icon="el-icon-user-solid" type="text" v-model="user.acct" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" label-width="50px">
          <el-input prefix-icon="el-icon-lock" type="password" v-model="user.paw" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <el-button @click="login('ruleForm')" type="primary" round style="width: 200px;height: 60px; margin: 30px 0">立 即 登 录
      </el-button>
      <div>
        <router-link to="/pwdforget" style="float: left;color: black;text-decoration: none">忘记密码</router-link>
      </div>
      <div>
        <router-link to="/register" style="float: right;color: black;text-decoration: none">还没密码？去注册</router-link>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {

  data() {
    return {
      user: {
        // acct:'',
        // paw:'',
      },
      // loginRule: {
      //   account: [
      //     {required: true, message: '请输入账号', trigger: 'blur'},
      //   ],
      //   password: [
      //     {required: true, message: '请输入密码', trigger: 'blur'},
      //     {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
      //   ]
      // }
    };
  },
  // created() {
  //   this.$axios.get("/api/user/main/info",{headers:{TOKEN:this.token}}).then(res=>{
  //     this.userInfo = res.data.data;
  //   })
  // },
  methods: {
    login() {
      // this.$refs[loginForm].validate((r) => {
      //   if (r) {
          this.$axios.post('/api/user/login', this.user).then((res) => {
            if (res.data.status === 1) {
              this.$message.success(res.data.msg);
              localStorage.setItem('TOKEN', res.data.data.token);
              // localStorage.setItem('NAME', res.data.data.name);
              this.$router.push('main')
            } else {
              this.$message.error(res.data.msg);
            }
          })
        // } else {
        //   this.$message.error("请填入完整信息")
        // }
      // })
    }
  }
}

</script>

<style scoped>

.bak {
  background-image: url("../img/bak2.jpg");
  position: relative;
}

.box-card {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  position: absolute;
  top: 20%;
  left: 30%;
}
</style>